// pages/ai/posterCreation/index.js
let app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isLoading: true,
    style: "", //风格
    keywords: "", //关键字 
    imgDraw: null, //绘制图片的大对象
    sharePath: '', //生成的分享图
    IMGBASEURL: app.globalData.IMGBASEURL,
    shareImg: "", //分享图
    bgImg: "", //背景图
    qrcodeImg: "", //二维码
    ratio: 0, //图片比例
    posterH: 0 //海报高度
  },
  // 生成海报
  drawPic() {
    // if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
    //   return
    // }
    let _this = this
    this.setData({
      imgDraw: {
        "width": "750rpx",
        "height": "1322rpx",
        "background": "#1A1A1A",
        "position": "relative",
        "views": [{ //背景
            "type": "image",
            "url": _this.data.bgImg,
            "mode": "widthFix",
            "css": {
              "width": "750rpx",
              "height": "1322rpx",
            }
          },
          { //logo
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/logo_11.png",
            "css": {
              "width": "76rpx",
              "height": "76rpx",
              "left": "32rpx",
              "top": "50rpx",
            },
          },
          { //logo 文字
            "type": "text",
            "text": "草图里",
            "css": {
              "width": "100rpx",
              "height": "80rpx",
              "left": "132rpx",
              "top": "70rpx",
              "fontSize": "28rpx",
              "color": "#fff"
            },
          },
          // 每日一图
          {
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/每日一图.png",
            "css": {
              "height": "76rpx",
              "left": "510rpx",
              "top": "50rpx",
            },
          },
          { //分享图
            "type": "image",
            "mode": "widthFix",
            "url": _this.data.shareImg,
            "css": {
              "width": "686rpx",
              "height": "686rpx",
              "left": "32rpx",
              "top": "160rpx",
              "borderRadius": "16rpx"
            }
          },
          { //风格
            "type": "text",
            "text": wx.getStorageSync('shareImgList').style,
            "css": {
              "width": "686rpx",
              "left": "32rpx",
              "top": "870rpx",
              "fontSize": "32rpx",
              "color": "#fff",
              "maxLines": "1"
            },
          },
          { //关键字图片
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-gjc@2.png",
            "css": {
              "width": "56rpx",
              "height": "132rpx",
              "left": "32rpx",
              "top": "938rpx",
            },
          },
          { //关键字文字背景
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-wenzi@2.png",
            "css": {
              "width": "626rpx",
              "height": "132rpx",
              "left": "95rpx",
              "top": "938rpx",
              "zIndex": "0"
            },
          },
          { //关键字文字
            "type": "text",
            "text": wx.getStorageSync('shareImgList').keywords,
            "css": {
              "width": "560rpx",
              "height": "80rpx",
              "maxLines": "2",
              "lineHeight": "40rpx",
              "left": "140rpx",
              "top": "964rpx",
              "fontSize": "28rpx",
              "color": "#C4C4C4",
            },
          },
          { //底部二维码
            "type": "image",
            "mode": "auto",
            "url": _this.data.qrcodeImg,
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "1120rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": "https://staticimg.aiiiin.com/wxapp/fast-text.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "1120rpx",
            },
          },
        ]
      }
    })
  },
  // 海报生成完成
  onImgOK(e) {
    console.log('绘图成功', e);
    if (e.detail.path) {
      this.setData({
        sharePath: e.detail.path,
        isLoading: false
      })
    }
  },
  // 绘图失败
  onImgErr(e) {
    console.log('绘图失败', e);
  },
  // 开始生成
  startCreate() {
    // console.log('下载图片',this.data.sharePath);
    // wx.showShareImageMenu({
    //   path: this.data.sharePath
    // })
    this.drawPic()
  },
  // 获取网络图片宽高并算出比例
  getImgSize(url) {
    wx.getImageInfo({
      src: url,
      success: res => {
        //1:1
        if (res.width === res.height) {
          this.data.posterH = 1100
          this.data.ratio = 1
        }
        //16:9
        if (res.width > res.height) {
          this.data.posterH = 800
          this.data.ratio = 16
        }
        //3:4
        if (res.width < res.height) {
          this.data.posterH = 1322
          this.data.ratio = 3
        }
        this.drawPic()
      }
    })
  },
  onShow() {
    // this.drawPic()
    // if (wx.getStorageSync('shareImg')) {
    //   // 比例存在
    //   if (wx.getStorageSync('shareImgList')?.ratio) {
    //     this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
    //     if (this.data.ratio === 1) this.data.posterH = 1322
    //     if (this.data.ratio === 3) this.data.posterH = 1560
    //     if (this.data.ratio === 16) this.data.posterH = 1100
    //     this.drawPic()
    //   } else {
    //     this.getImgSize(wx.getStorageSync('shareImg'))
    //   }
    // }
  },
  onLoad(options) {
    wx.downloadFile({
      url:"https://staticimg.aiiiin.com/wxapp/ui-win-bg.png",
      success:(res)=>{
        this.setData({
          bgImg:res.tempFilePath
        })
        console.log('背景',this.data.bgImg);
      }
    })
    wx.downloadFile({
      url:wx.getStorageSync('shareImg'),
      success:(res)=>{
        this.setData({
          shareImg:res.tempFilePath
        })
        console.log('分享图',this.data.shareImg);
      }
    })
    wx.downloadFile({
      url:"https://staticimg.aiiiin.com/wxapp/caotu-code.jpg",
      success:(res)=>{
        this.setData({
          qrcodeImg:res.tempFilePath
        })
        console.log('二维码',this.data.qrcodeImg);
      }
    })
  },
  onUnload() {
    wx.removeStorageSync('styleStr')
    // console.log('页面销毁');
  }
})